var getName = ['a市局', 'b市局', 'c市局', 'd市局', 'e市局', 'f市局', 'g市局', 'h市局', 'i市局', 'j市局', 'k市局', 'm市局', 'l市局', 'n市局', ];
var getValue_QB = [1026, 865, 826, 808, 756, 720, 633, 580, 430, 480, 433, 378, 366, 321, 223];
var getValue_AJ = [626, 465, 426, 408, 356, 320, 300, 288, 255, 233, 189, 144, 133, 122];
var dataZoom_end = 4
var labelColor = ['rgba(12,87,116,1)', 'rgba(12,87,116,0.9)', 'rgba(12,87,116,0.8)'];
var allow_scroll = true
var emptyData = getValue_QB.map((v, i) => {
    let color = i > 2 ? '#00B2FF' : labelColor[i];
    let item = {
        value: v,
        label: {
            formatter: '{a|' + v + '}',
            position: 'right',
            distance: 20,
            rich: {
                a: {
                    color: color,
                    borderColor: color,
                    // borderWidth: 1,
                    // borderType: 'dashed',
                    padding: [0, 0, 2, 0],
                    width: 60,
                    height: 18,
                    fontWeight: 'bold',
                    fontFamily: 'ACENS',
                    align: 'left',
                    verticalAlign: 'middle',
                }
            }

        }
    }
    return item
})

var emptyData2 = getValue_QB.map((v, i) => {
    let color = i > 2 ? '#00B2FF' : labelColor[i];
    let item = {
        value: v - 400,
        label: {
            formatter: '{a|' + v + '}',
            position: 'right',
            distance: 20,
            rich: {
                a: {
                    color: color,
                    borderColor: color,
                    // borderWidth: 1,
                    // borderType: 'dashed',
                    padding: [0, 0, 2, 0],
                    width: 60,
                    height: 18,
                    fontWeight: 'bold',
                    fontFamily: 'ACENS',
                    align: 'left',
                    verticalAlign: 'middle',
                }
            }

        }
    }
    return item
})

var WORK_SORT_OPTION = {
    backgroundColor: "rgba(0,0,0,0)",
    grid: {
        left: '7%',
        right: '20%',
        bottom: '2%',
        top: '10%',
        containLabel: true
    },
    legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: ['AJ', 'QB'],
        selectedMode: 'single',
        textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
        },
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'none'
        },
        formatter: function (params) {
            return params[0].name + ' : ' + params[0].value
        }
    },
    xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: [{
        type: 'category',
        inverse: true,
        offset: 76,
        axisLabel: {
            show: true,
            align: 'left',
            formatter: function (value, index) {
                var num = getName.findIndex(item => item == value) + 1
                var str = ''
                if (index === 0) {
                    str = '   {num1|' + num + '} {title1|' + value + '}'
                } else if (index === 1) {
                    str = '   {num2|' + num + '} {title2|' + value + '}'
                } else if (index === 2) {
                    str = '   {num3|' + num + '} {title3|' + value + '}'
                } else {
                    str = '   {num|' + num + '} {title|' + value + '}'
                }
                return str;

            },
            rich: {
                num: {
                    color: '#fff',
                    width: 20,
                    height: 20,
                    fontSize: 14,
                    align: 'center',
                    backgroundColor: "rgba(12,87,116,0.5)"
                },
                num1: {
                    color: '#fff',
                    width: 20,
                    height: 20,
                    fontSize: 14,
                    align: 'center',
                    backgroundColor: "rgba(12,87,116,1)"
                },
                num2: {
                    color: '#fff',
                    width: 20,
                    height: 20,
                    fontSize: 14,
                    align: 'center',
                    backgroundColor: "rgba(12,87,116,0.9)"
                },
                num3: {
                    color: '#fff',
                    width: 20,
                    height: 20,
                    fontSize: 14,
                    align: 'center',
                    backgroundColor: "rgba(12,87,116,0.8)"
                },
                title: {
                    color: '#fff',
                },
                title1: {
                    color: "#fff",
                },
                title2: {
                    color: "#fff",
                },
                title3: {
                    color: "#fff",
                },
            }
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        data: getName
    }, {
        inverse: true,
        data: getValue_QB,
        offset: -20,
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: '10'
            },
            formatter: (value) => {
                // console.log(data1,'data1哈哈啊');
                if (value) {
                    value = (value * 1).toLocaleString()
                }
                return value;
            },
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        splitLine: { //修改背景线条样式
            show: false
        }
    }],
    series: [{
        name: 'AJ',
        type: 'bar',
        zlevel: 1,
        label: {
            show: true,
            position: 'right',
            color: '#fff',
            fontSize: 14,
            offset: [5, 0]
        },
        itemStyle: {
            normal: {
                barBorderRadius: 30,
                color: (val) => {
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgb(128,204,255,1)'
                    }, {
                        offset: 1,
                        color: 'rgb(46,200,207,1)'
                    }])
                }
            },
        },
        barWidth: 5,
        data: emptyData
    }, {
        name: 'QB',
        type: 'bar',
        zlevel: 1,
        label: {
            show: true,
            position: 'right',
            color: '#fff',
            fontSize: 14,
            offset: [5, 0]
        },
        itemStyle: {
            normal: {
                barBorderRadius: 30,
                color: (val) => {
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgb(128,204,255,1)'
                    }, {
                        offset: 1,
                        color: 'rgb(46,200,207,1)'
                    }])
                }
            },
        },
        barWidth: 5,
        data: emptyData2
    }],
    dataZoom: [{
        type: 'slider',
        show: false,
        yAxisIndex: 0,
        zoomLock: false,
        width: 8,
        showDetail: false,
        startValue: 0, // 从头开始。
        endValue: dataZoom_end, // 一次性展示五个。
        borderWidth: 0,
        borderColor: 'transparent',
        backgroundColor: '#343F4B',
        fillerColor: '#4291CE',
        showDataShadow: false,
        brushSelect: false,
        height: '88%',
        handleStyle: {
            color: '#4291CE',
        },
        handleIcon: 'path://M512 512m-320 0a320 320 0 1 0 640 0 320 320 0 1 0-640 0Z',
    }, {
        type: 'slider',
        show: false,
        yAxisIndex: 1,
        zoomLock: false,
        width: 8,
        showDetail: false,
        startValue: 0, // 从头开始。
        endValue: dataZoom_end, // 一次性展示五个。
        borderWidth: 0,
        borderColor: 'transparent',
        backgroundColor: '#343F4B',
        fillerColor: '#4291CE',
        showDataShadow: false,
        brushSelect: false,
        height: '88%',
        // zoomOnMouseWheel: true,
        handleStyle: {
            color: '#4291CE',
        },
        handleIcon: 'path://M512 512m-320 0a320 320 0 1 0 640 0 320 320 0 1 0-640 0Z',
    }],
};

// function autoMove_workSort() {
//     setInterval(() => {
//         if (Number(WORK_SORT_OPTION.dataZoom[0].endValue) === getName.length - 1) {
//             WORK_SORT_OPTION.dataZoom[0].endValue = dataZoom_end;
//             WORK_SORT_OPTION.dataZoom[0].startValue = 0;
//         } else {
//             WORK_SORT_OPTION.dataZoom[0].endValue = WORK_SORT_OPTION.dataZoom[0].endValue + 1;
//             WORK_SORT_OPTION.dataZoom[0].startValue = WORK_SORT_OPTION.dataZoom[0].startValue + 1;
//         }
//         myChart.setOption(WORK_SORT_OPTION);
//     }, 3000);
// }